<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/vue/2.6.4/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script src="../build/echarts/china.js"></script>
</head>

<body style="background-color: #060E23">
    <div id="echarts" style="width: 1000px;height:800px;"></div>
</body>

<script>
    let myChart = echarts.init(document.getElementById('echarts'), 'shine');

    let mapData = [{
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "110000",
        "name": "北京",
        "value": 12,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "120000",
        "name": "天津",
        "value": 5,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "130000",
        "name": "河北",
        "value": 10,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "140000",
        "name": "山西",
        "value": 7,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "150000",
        "name": "内蒙古",
        "value": 6,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "210000",
        "name": "辽宁",
        "value": 1,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "220000",
        "name": "吉林",
        "value": 3,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "230000",
        "name": "黑龙江",
        "value": 8,
        "selected": false,
        "child": [
            "黑龙江第一", "黑龙江第二", "黑龙江第三", "黑龙江第四"
        ]
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "310000",
        "name": "上海",
        "value": 53,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "320000",
        "name": "江苏",
        "value": 35,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "330000",
        "name": "浙江",
        "value": 17,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "340000",
        "name": "安徽",
        "value": 42,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "350000",
        "name": "福建",
        "value": 13,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "360000",
        "name": "江西",
        "value": 15,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "370000",
        "name": "山东",
        "value": 13,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "410000",
        "name": "河南",
        "value": 4,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "420000",
        "name": "湖北",
        "value": 14,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "430000",
        "name": "湖南",
        "value": 17,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "440000",
        "name": "广东",
        "value": 11,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "440300",
        "name": "深圳",
        "value": 2,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "450000",
        "name": "广西",
        "value": 7,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "460000",
        "name": "海南",
        "value": 3,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "500000",
        "name": "重庆",
        "value": 15,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "510000",
        "name": "四川",
        "value": 18,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "520000",
        "name": "贵州",
        "value": 4,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "530000",
        "name": "云南",
        "value": 7,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "610000",
        "name": "陕西",
        "value": 6,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "630000",
        "name": "青海",
        "value": 1,
        "selected": false
    }, {
        "queryString": null,
        "row": {
            "first": null,
            "count": null,
            "sort": null,
            "order": null
        },
        "map": {},
        "formLog": null,
        "modifiedLog": null,
        "deletedLog": null,
        "newLog": null,
        "code": "650000",
        "name": "新疆",
        "value": 8,
        "selected": false
    }];

    let option = { // 进行相关配置
        animation: false,
        tooltip: {
            show: true, // 不显示提示标签
            formatter: function (params) {
                console.log(params)
                let data = params.data;
                let pcode = data.code;
                let pname = data.name;
                let value = data.value;
                console.log(params.data)
                let children = params.data.child
                if (children === undefined) {
                    return '<span style="color:blue;">' + pname + '<br>[' + value + ']</span>'
                }
                let content = '<table>'
                for (var i = 0; i < children.length; i++) {
                    content += '<tr><td>' + children[i] + '</td></tr>';
                }
                content += '</table>'
                return '<span style="color:red">' + pname + '</span> <br>' + content;
            }, // 提示标签格式
            backgroundColor: '#ff7f50', // 提示标签背景颜色
            enterable: true,
            textStyle: {
                color: '#fff'
            } // 提示标签字体颜色
        },
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //         dataView: {
        //             readOnly: false
        //         },
        //         restore: {},
        //         saveAsImage: {}
        //     }
        // },
        visualMap: {
            show: true,
            min: 0,
            max: 50,
            left: 'left',
            top: 'bottom',
            splitNumber: 5,
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            realtime: true,

            inRange: {
                color: ['#002A8C', '#4F98FF']
            },
            outRange: {
                color: ['#4F98FF']
            },
            // color: ['#4F98FF', '#002A8C'],
            // 字体样式
            textStyle: {
                color: '#fff'
            }
        },
        series: [{
            type: 'map',
            mapType: 'china',
            scaleLimit: {
                min: 0.5,
                max: 2
            },
            roam: true,
            /* 是否开启鼠标缩放和平移漫游*/
            aspectScale: 0.75,
            layoutCenter: ['40%', this.isPC ? '50%' : '40%'],
            // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
            layoutSize: this.isPC ? 950 : 750,
            top: 'middle',
            label: {
                normal: {
                    show: true, // 显示省份标签
                    textStyle: {
                        color: '#CBD3EE', // 省份标签字体颜色
                        fontSize: '16'
                    },
                    formatter: function (params) {
                        return (!isNaN(params.value) || params.value > 0) ? '{color1|' + params.name +
                            '}' : '{color2|' + params.name + '}'
                    },
                    rich: {
                        color1: {
                            color: '#FFFFFF'
                        },
                        color2: {
                            color: '#919191'
                        }
                    }
                },
                emphasis: { // 对应的鼠标悬浮效果
                    show: true,
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize: '16'
                    },
                    formatter: function (params) {
                        return (!isNaN(params.value) || params.value > 0) ? '{color1|' + params.name +
                            '}' : '{color2|' + params.name + '}'
                    },
                    rich: {
                        color1: {
                            color: '#FFFFFF'
                        },
                        color2: {
                            color: '#000'
                        }
                    }
                }
            },
            itemStyle: {
                borderColor: '#39589C',
                areaColor: '#00174C',
                // normal: {
                //     borderWidth: 0.68, // 区域边框宽度
                //     borderColor: '#39589C', // 区域边框颜色
                //     areaColor: '#001035' // 区域颜色
                // },
                emphasis: {
                    borderWidth: 0.68,
                    borderColor: '#39589C',
                    areaColor: '#5487C6'
                }
            },
            data: mapData,
            selectedMode: 'multiple'
        }]
    }

    myChart.setOption(option)
</script>

</html>